<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>杨氏双缝干涉模拟实验</title>
    <script src="https://cdn.plot.ly/plotly-2.24.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/pyodide/v0.24.1/full/pyodide.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>杨氏双缝干涉模拟实验</h1>
        </header>

        <div class="main-content">
            <!-- 左侧图表区域 -->
            <div class="charts">
                <div id="stripe-plot" class="chart"></div>
                <div id="intensity-plot" class="chart"></div>
            </div>

            <!-- 右侧控制面板 -->
            <div class="control-panel">
                <div class="panel">
                    <h3>实验参数控制</h3>
                    
                    <div class="slider-group">
                        <label for="d-slider">双缝间距 (mm)</label>
                        <input type="range" id="d-slider" min="0.1" max="2.0" step="0.1" value="0.5" class="slider">
                        <span id="d-value">0.5 mm</span>
                    </div>

                    <div class="slider-group">
                        <label for="L-slider">缝屏距离 (m)</label>
                        <input type="range" id="L-slider" min="0.5" max="5.0" step="0.1" value="2.0" class="slider">
                        <span id="L-value">2.0 m</span>
                    </div>

                    <div class="slider-group">
                        <label for="lambda-slider">波长 (nm)</label>
                        <input type="range" id="lambda-slider" min="400" max="700" step="10" value="632" class="slider">
                        <span id="lambda-value">632 nm</span>
                    </div>

                    <div class="slider-group">
                        <label for="bandwidth-slider">带宽 (nm)</label>
                        <input type="range" id="bandwidth-slider" min="0" max="50" step="5" value="0" class="slider">
                        <span id="bandwidth-value">0 nm</span>
                    </div>

                    <button id="reset-button" class="reset-btn">重置参数</button>
                </div>

                <!-- 参数显示区域 -->
                <div id="parameter-display" class="parameter-display">
                    <h3>实验参数与计算结果</h3>
                    <div id="params-text">加载中...</div>
                </div>
            </div>
        </div>

        <!-- 加载提示 -->
        <div id="loading" class="loading">
            <p>正在加载 Python 环境...</p>
            <div class="spinner"></div>
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html>